<template>
  <div class="my_contain">
    <div style="width:100%;height:100%;" ref="line"></div></div>
</template>

<script>
export default {
  name: 'MimiUdiskInfo',
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine(){ // U盘使用频率折线图
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.line)
      //中间数据
      var nodesM = [{
          name: '服务器'
      }];
      //上下图表数据
      var nodes = [{
          name: '采集设备01',
          state: '1'
        },
        {
            name: '采集设备002',
            state: '1'
        },
        {
            name: '采集设备02',
            state: '1'
        },
        {
            name: '采集设备1',
            state: '1'
        },
        {
            name: '采集设备2',
            state: '1'
        },
        {
            name: '采集设备3',
            state: '1'
        },
        {
            name: '采集设备4',
            state: '1'
        },
        {
            name: '采集设备5',
            state: '0'
        },
        {
            name: '采集设备6',
            state: '1'
        },
        {
            name: '采集设备7',
            state: '1'
        },
        {
            name: '采集设备8',
            state: '0'
        },
        {
            name: '采集设备9',
            state: '1'
        },
        {
            name: '采集设备10',
            state: '1'
        },
        {
            name: '采集设备11',
            state: '1'
        },
        {
            name: '采集设备12',
            state: '1'
        },
        {
            name: '采集设备13',
            state: '0'
        },
        {
            name: '采集设备14',
            state: '1'
        },
        {
            name: '采集设备15',
            state: '1'
        },
        {
            name: '采集设备16',
            state: '1'
        },
        {
            name: '采集设备17',
            state: '1'
        }
      ];

      var charts = {
          nodes: [],
          links: [],
          linesData: []
      };
      var x = 0;
      var y = 1;
      var dataMap = new Map();
      var aValue = [];
      for (var j = 0; j < nodes.length; j++) {
          if (j % 2 == 0) { //偶数
              aValue = [x, y];
          } else {
              aValue = [x, y - 2];
              x += 2;
          }
          let node = {
              name: nodes[j].name,
              value: aValue,
              symbolSize: 40,
              // symbol: 'image://images/' + nodes[j].img,
              symbol: 'image://https://gitee.com/dulily/cdn/raw/master/img/ava.png',
              itemStyle: {
                  normal: {
                      color: '#12b5d0',
                      fontSize: 12,
                      fontWeight: 'normal'
                  }
              }
          };
          dataMap.set(nodes[j].name, aValue);
          charts.nodes.push(node);
      }
      //中间数据显示
      for (var k = 0; k < nodesM.length; k++) {
          let node = {
              name: nodesM[k].name,
              value: [x / 2 + k - 1, y - 1],
              symbolSize: 100,
              // symbol: 'image://images/' + nodesM[k].img
              symbol: 'image://https://gitee.com/dulily/cdn/raw/master/img/20210206152021.png'
          };
          dataMap.set(nodesM[k].name, [x / 2 + k - 1, y - 1]);
          charts.nodes.push(node)
      }

      //画线
      var labelName = '';
      for (var i = 0; i < nodes.length; i++) {
          //通过传输状态state 显示传输文字提示
          if (nodes[i].state === '1') {
              labelName = '数据传输中'
          } else {
              labelName = '暂停传输'
          }
          var link = {
              source: nodes[i].name,
              target: nodesM[0].name,
              label: {
                  normal: {
                      show: true,
                      formatter: labelName,
                      color: '#ed46a2',
                      fontSize: 12,
                      fontWeight: 'normal'
                  }
              },
              lineStyle: {
                  normal: {
                      color: '#ed46a2',
                      width: .5
                  }
              }
          };
          charts.links.push(link);

          //判断传输状态1 传输动效改变线条颜色
          if (nodes[i].state === '1') {
              link.lineStyle.normal.color = '#27b0fe';
              link.label.normal.color = '#27b0fe';
              var lines = [{
                  coord: dataMap.get(nodes[i].name)
              }, {
                  coord: dataMap.get(nodesM[0].name)
              }];
              charts.linesData.push(lines)
          }
      }

      let option = {
          title: {
              text: '采集拓扑图'
          },
      //  backgroundColor: "#0e1735",
          xAxis: {
              show: false,
              type: 'value'
          },
          yAxis: {
              show: false,
              type: 'value'
          },
          series: [{
              type: 'graph',
              layout: 'none',
              coordinateSystem: 'cartesian2d',
              symbolSize: 50,
              label: {
                  normal: {
                      show: true,
                      position: 'bottom',
                      color: '#ffffff'
                  }
              },
              lineStyle: {
                  normal: {
                      shadowColor: 'none',
                      opacity: 1, //尾迹线条透明度
                      curveness: .1 //尾迹线条曲直度
                  }

              },
              edgeSymbolSize: 8,
              data: charts.nodes,
              links: charts.links,
              itemStyle: {
                  normal: {
                      label: {
                          show: true,
                          formatter: function (item) {
                              return item.data.name
                          }
                      }
                  }
              }
          }, {
              name: 'A',
              type: 'lines',
              coordinateSystem: 'cartesian2d',
              effect: {
                  show: true,
                  period: 4, //箭头指向速度，值越小速度越快
                  trailLength: 0.02,
                  symbol: 'pin',
                  color: '#ffaa5f',
                  symbolSize: 10

              },
              lineStyle: {
                  color: '#fff',
                  curveness: .1 //尾迹线条曲直度
              },
              data: charts.linesData
          }]
      };


      /*采集拓扑图 chart*/
      myChart.setOption(option);
      window.onresize = myChart.resize;

      //添加点击事件
      myChart.on('click', function (params) {
          // 弹窗打印数据的名称
          if (params.dataType == "node") {
              alert("节点名称：" + params.name);
          } else if (params.dataType == "edge") {
              alert("from：" + params.data.source + "=====to:" + params.data.target);
          }
      });


    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor--datetimerange.el-input__inner {
  width: 350px;
}
ul, li {
  margin: 0;
}
.my_contain {
  height: 500px;
  background-color: #f0f0f0;
  .row-time {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
    .col-time {
      line-height: 32px;
      span {
        padding: 5px;
      }
      .time-link {
        cursor: pointer;
      }
    }
  }
  .row-chart {
    height: auto;
    margin-bottom: 15px;
    .col-chart-two {
      background-color: #fff;
      height: 400px;
      box-sizing: border-box;
      .col-chart-title-two {
        width: 100%;
        padding: 8px 10px;
        color: #fff;
        background-color: #c7c7c7;
        box-sizing: border-box;
      }
      .col-chart-main-two {
        width: 100%;
        height: calc(100% - 37px);
        box-sizing: border-box;
        padding: 15px;
      }
    }
    .col-chart {
      background-color: #fff;
      height: 400px;
      box-sizing: border-box;
      .col-chart-title {
        width: 100%;
        padding: 8px 10px;
        color: #fff;
        background-color: #c7c7c7;
        box-sizing: border-box;
      }
      .col-chart-main {
        width: 100%;
        height: calc(100% - 37px);
        box-sizing: border-box;
        padding: 15px;
        .seamless-warp {
          height: 333px;
          overflow: hidden;
          li {
            line-height: 37px;
          }
        }
      }
    }
  }
}
.row-div {
  margin-bottom: 15px;
}
</style>